                                            <!-- 排列组件 -->
												   
<!--可传递属性 -->
<!-- selectType:控制需要选择的两种不同的展示模块  
				   1 显示类似于标题栏，成员间有间隔，且不能滑动（建议数量比较少时使用）   默认是 1
				   2 显示类似于选择栏，成员间一字横排无间隔，且能滑动
       bindIndex：默认选择位置  默认0
		infoList：用于循环的数组  （只能接收带有每个标题信息的数组，使用时应将接收的数组过滤后在传递过去）
          例：[
                {
                    title: '家庭会员中心',
                    icon: 'https://oss4.komect.com/equity-gs/cms/home/index_ic_bbsy.png',
                    changIcon: 'https://oss4.komect.com/equity-gs/cms/home/index_ic_bbsy_xz.png'
                },
                {
                    title: '权益中心',
                    icon: 'https://oss4.komect.com/equity-gs/cms/home/index_ic_qyhy.png',
                    changIcon: 'https://oss4.komect.com/equity-gs/cms/home/index_ic_qyhy_xz.png'
                }]
            注：title 标题  icon未选中时图标地址  changIcon选中时的图标地址（若不需要图标，则这两个属性不传或为空  若变化图标都是一致的，则该两个属性传参为同一地址就行）
            
		pvuvName:pvuv埋点传递名称信息 (传递父组件名称) -->
<!-- 需配套的函数 -->
<!-- clickIndex:向父元素传递位置信息，方便父元素进行相关联的操作
			   index：点击的位置数据
			   pvuvName：pvuv 埋点信息  
			   例：clickIndex(msg) {
                 console.log(msg);
              },-->

<template>
    <div class="clickChange" :class="selectType == 1 ? 'clickChangeOne' : 'clickChangeTwo'">
        <!-- 第一种模式 ： 显示类似于标题栏，成员间有间隔，且不能滑动 -->
        <!-- ---------------------------------------------------------------------------------------- -->
        <div
            class="clickChange-one"
            v-if="selectType == 1"
            v-for="(value, index) in infoList"
            :key="index"
            :class="index == clickChange ? 'clickOne' : ''"
            @click="changeNumber(index)"
        >
            <!-- 成员左部图标信息 -->
            <!-- 未点击时图标 -->
            <div
                class="clickChange-one-icon"
                v-if="value.changIcon && value.icon"
                v-show="index != clickChange"
                :style="{ backgroundImage: 'url(' + value.icon + ')' }"
            ></div>
            <!-- 点击后的图标 -->
            <div
                class="clickChange-one-icon"
                v-if="value.changIcon && value.icon"
                v-show="index == clickChange"
                :style="{ backgroundImage: 'url(' + value.changIcon + ')' }"
            ></div>

            <!-- 标题 -->
            {{ value.title }}

            <!-- 变化下标 -->
            <div class="clickChange-one-bottomIcon" v-show="index == clickChange"></div>
        </div>

        <!-- 第二种模式 ： 显示类似于选择栏，成员间一字横排无间隔，且能滑动 -->
        <!-- ---------------------------------------------------------------------------------------- -->
        <div
            class="clickChange-two"
            v-if="selectType == 2"
            v-for="(value, index) in infoList"
            :key="index"
            :class="index == clickChange ? 'clickTwo' : ''"
            @click="changeNumber(index)"
        >
            {{ value }}
        </div>
    </div>
</template>

<script>
export default {
    props: {
        // 功能控制部分
        // ------------------------------------------------------------------------------

        // 控制需要选择的两种不同的展示模块
        selectType: {
            type: [String, Number],
            default: 1
        },

        // 默认选择位置  默认0
        bindIndex: {
            type: [String, Number],
            default: 0
        },

        // 内容传递部分
        // ------------------------------------------------------------------------------
        // 用于循环的数组
        infoList: {
            type: [Array],
            default() {
                return [];
            }
        },

        // pvuv 埋点信息 （父组件的名称）
        pvuvName: {
            type: [String],
            default: ''
        }
    },
    data() {
        return {
            clickChange: 0
        };
    },
    created() {
        // 同步默认选择位置
        this.bindIndex ? (this.clickChange = this.bindIndex) : (this.clickChange = 0);
    },
    methods: {
        // 点击切换样式的函数
        changeNumber(index) {
            this.clickChange = index;

            // 向父元素传递位置信息，方便父元素进行相关联的操作
            this.$emit('clickIndex', { index: index, pvuvName: this.pvuvName });
        }
    }
};
</script>

<style>
/* 整个模块外层 */
/* ---------------------------------------------------------------- */
.clickChange {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 15px;
    line-height: 25px;
    font-weight: 600;
    overflow: scroll;
    display: flex;
    align-items: center;
    cursor: default;
}

/* 用于隐藏滚动条 */
::-webkit-scrollbar {
    display: none;
}

/* 第一种模块时，应该展示的样式 */
.clickChangeOne {
    justify-content: space-between;
}

/* 第二种模块时，应该展示的样式 */
.clickChangeTwo {
    border: solid 1px;
}

/* 模式一样式 */
/* ---------------------------------------------------------------- */
.clickChange-one {
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    color: #f2f7fc;
    line-height: 90px;
    height: 100%;
}
/* 第一种模式左部左部图标样式 */
.clickChange-one-icon {
    width: 18px;
    height: 16px;
    margin-right: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* 变化下标样式 */
.clickChange-one-bottomIcon {
    width: 100%;
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #00a0ff;
    border-radius: 2px;
}

/* 第一种模式点击样式变化 */
.clickOne {
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #00a0ff;
}

/* 模式二样式 */
/* ---------------------------------------------------------------- */
.clickChange-two {
    border-right: solid 1px;
    border-left: solid 1px;
    padding: 0 3px;
    /* display: inline-block; */
    white-space: nowrap;
    font-size: 13px;
    font-weight: 400;
    margin-right: 3px;
    transition: all 0.6s;
}
/* 第二种模式点击样式变化 */
.clickTwo {
    background: cornflowerblue;
    font-size: 15px;
    font-weight: 600;
}
</style>
